<template>
	<div class="userSave">
		<div class="userSave_cont">
			<div class="changePhone_items">
				<div class="changePhone_items_left">
					<div class="changePhone_items_leftTtite">意见类型</div> <input type="texrt" v-model="title"
						maxlength="11" value="" placeholder="请输入" />
				</div>
			</div>
			<div class="changePhone_items">
				<div class="changePhone_items_left">
					<div class="changePhone_items_leftTtite">意见描述</div> <textarea value="" v-model="content"
						placeholder="请输入意见描述" />
				</div>
			</div>
		</div>
		<!-- 添加图片 -->
		<div class="inviteUpdate">
			上传照片 </div>
		<div class="inviteUpdate_img">
			<div class="inviteUpdate_left" @click='UpImg(1)'>
				<image :src="ite" mode="" v-if="image" v-for='(ite,idx) in image' :key="idx"></image>
				<image src="https://wx.sjcmhz.com/static/image/upload.png" mode="" v-if='image.length<=4'></image>
			</div>
		</div>
		<div class="userSaveBtn" @click='saveEvent()'>
			提交反馈
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				SMSCode: '',
				title: '',
				content: '',
				image:[]

			}
		},
		methods: {
			// 上传图片
			UpImg(index) {
				var that = this
				uni.chooseImage({
					count: 4,
					sourceType: ['camera'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.thumbnail = tempFilePaths
						that.UpList(index, that.thumbnail)
					}
				});
			},
			UpList(index, file) {
				var that = this
				that.$utils.UpdataImg(file, (res) => {
					console.log("resssssss", res)
					that.image = that.image.concat(res)
					// that.$set(that.from, 'image', res)
				})
			},
			async saveEvent() {
				const {
					data
				} = await this.$request(this.$Api.userSave, {
					title: this.title,
					content: this.content,
					images: JSON.stringify(this.image)
				}, "POST")
				if (data.code !== 0) return
				uni.showToast({
					title: "提交成功",
					mask: true,
					icon: "none",
					duration: 1000
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 800)
			}
		}
	}
</script>

<style lang="less">
	.userSave {
		padding: 24rpx 0;

		.inviteUpdate {
			font-size: 30rpx;
			line-height: 94rpx;
			padding: 0 44rpx;


		}

		.inviteUpdate_left,
		.inviteUpdate_right {
			width: 100%;
			min-height: 224rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			// float:left;
			image {
				width: 294rpx;
				height: 224rpx;
				background: #f5f5f5;
				margin-right: 20rpx;
				margin-bottom: 20rpx;

			}
		}

		.inviteUpdate_img {
			display: flex;
			align-items: center;
			justify-content: space-between;

			padding: 0 22rpx;
			box-sizing: border-box;
			margin-bottom: 10rpx;
		}

		.inviteUpdate_img_yu {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 0 22rpx;
			box-sizing: border-box;
			margin-bottom: 10rpx;
			color: #2D60FF;
			font-size: 28rpx;
			margin-top: 20rpx;
		}

		.changePhone_items {
			width: 750rpx;
			min-height: 100rpx;
			border-bottom: 1rpx solid #C9C9C9;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: #fff;

			.changePhone_items_left {
				display: flex;
				font-size: 28rpx;
				line-height: 100rpx;

				.changePhone_items_leftTtite {
					min-width: 140rpx;
				}

				div {
					margin-right: 100rpx;
					width: 100rpx;
				}

				input {
					height: 100rpx;
					line-height: 100rpx;
				}

				textarea {
					height: 200rpx;
					width: 500rpx;
					padding: 24rpx 40rpx 0 0;
					box-sizing: border-box;
					color: #666;
					line-height: 40rpx;

				}
			}
		}

		.changePhone_items:last-child {
			border: none;
		}
	}

	.userSaveBtn {
		width: 750rpx;
		height: 100rpx;
		background: #9013FE;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>